<template>
	<div class="MainRight_1 flex justify_content_sb eventWraper1">
		<div
			class="flex direction_column justify_content_c align_items_c MainRight_1_item pointer"
			@click="$router.push({ path: '/hk' })"
		>
			<img
				src="https://res.metaera.hk/resources/assets/images/home/简体 香港专区入口@3x.png"
				alt=""
			/>
		</div>

		<div
			class="flex direction_column justify_content_c align_items_c MainRight_1_item pointer"
			@click="$router.push({ path: '/usa' })"
		>
			<img
				src="https://res.metaera.hk/resources/assets/images/home/简体 美国专区入口@3x.png"
				alt=""
			/>
		</div>
	</div>
</template>

<script></script>

<style scoped>
.MainRight_1 {
	width: 100%;
	background: rgba(255, 255, 255, 0);
	border-radius: 8px 8px 8px 8px;
	opacity: 1;
	border: 1px solid #f7f7f7;
}
.MainRight_1_item {
	width: calc(100vw * 165 / 375);
}

.MainRight_1_item img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.MainRight_1_item div {
	font-size: 12px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-weight: 400;
	color: #000000;
	margin-top: 5px;
	text-align: center;
}

@media screen and (max-width: 900px) {
	.MainRight_1 {
		border: 0;
	}
}

.eventWraper1 {
	margin-top: 20px;
	/* border: 1px solid #eef0f8; */
}
.eventWraper1:hover {
	box-shadow: 0px 0px 10px 1px rgba(30, 48, 147, 0.16);
	border-radius: 8px;
	opacity: 1;
	border: 1px solid #eef0f8;
	margin-bottom: 0px;
}
</style>
